<template> 
  <div class="app-container">
      <span v-if="modelInfo == null">
        加载中...
      </span>
    <template v-else>
        <search-form :fieldList="modelInfo.fields" @reset="resetQuery" @query="handleQuery" />        
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
            <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
            </el-col>
            <el-col :span="1.5">
            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete">删除</el-button>
            </el-col>
            <el-col :span="1.5">
            <el-button type="info" plain icon="Upload" @click="handleImport">导入</el-button>
            </el-col>
            <el-col :span="1.5">
            <el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
            </el-col>
            <right-toolbar @queryTable="getList" :columns="tableFields"></right-toolbar>
        </el-row>
        <el-table v-loading="pageInfo.loading" :data="dataList" ref="table" @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="50" align="center" />
              <template v-for="(f,i) in tableFields" :key="i">
                <el-table-column :label="f.name" align="center" :prop="f.code"  v-if="f.visible">
                <template #default="scope">                  
                  <image-preview :src="scope.row.logo" :width="50" :height="50" v-if="f.formType == 'images'"/>
                  <form-tag :options="dsOptions[f.dsCode]" :value="scope.row[f.code]" v-else-if="f.formType == 'radio' || f.formType == 'checkbox'"/>
                  <form-tag :options="dsOptions[f.dsCode]" :value="scope.row[f.code]" v-else-if="f.formType == 'select' || f.formType == 'tree'"/>
                  <span v-else>{{scope.row[f.code]}}</span>
                </template>
                </el-table-column>
              </template>
            <el-table-column label="操作" fixed="right"  align="center" class-name="small-padding fixed-width" v-if="modelInfo.type != 'log'">
                <template #default="scope">
                <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
                <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="pageInfo.total>0"
            :total="pageInfo.total"
            v-model:page="pageInfo.pageNum"
            v-model:limit="pageInfo.pageSize"
            @pagination="getList"
        />
    </template>
    <model-form v-if="modelInfo != null" :fieldList="modelInfo.fields" :formData="formData" @close="handleCloseForm" @submit="handleSubmit" />
    <import-form v-if="modelInfo != null" :formData="formData" @close="handleCloseForm" @submit="handleSubmit" />
  </div>
</template>

<script setup name="RunModel">
import { getModelDetail } from "@/api/dev/model";
import { listModelData, delModelData } from "@/api/dev/modelData";

import useDictStore from '@/store/modules/dict';
import { getDicts } from '@/api/system/dict/data';
import { dsData } from "@/api/dev/modelData";

import  SearchForm  from "./search";
import  ModelForm  from "./form";
import  ImportForm  from "./import";

import FormTag from '@/components/Form/Tag';

const { proxy } = getCurrentInstance();
const route = useRoute();

const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const modelInfo = ref(null);
const modelId = ref(null);
const tableFields = ref([]);
const dataList = ref([]);
const pageInfo = ref({total:0,pageSize:10, pageNum:1, loading:false});
const queryParams = ref({});
const dsOptions = ref({});
const formData = ref({formId:null, formTitle: null, formAction: null, formModel: null});

modelId.value = route.query.modelId || route.params.modelId;

getModelDetail(modelId.value).then(response=>{
    modelInfo.value = response.data;
    initFields(response.data.fields);
    if(response.data.type == 'tree'){
        pageInfo.value.pageSize = 10000;
    }
    getList();

    formData.value.formModel = modelInfo.value.code;
});

/** 解析字段 */
function initFields(fieldList) {
    let fields1 = [];
    for(let i=0;i<fieldList.length;i++){
        let field = fieldList[i];
        field.visible = (i<12);
        field.label = field.name;
        fields1.push(field);
    }
    tableFields.value = fields1;
}

/** 查询模型字段列表 */
function getList() {
  pageInfo.value.loading = true;
  let params = Object.assign({}, pageInfo.value, queryParams.value);
  listModelData(modelInfo.value.code, params).then(response => {
    dataList.value = response.rows;
    pageInfo.value.total = response.total;
    pageInfo.value.loading = false;
  });
}


// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item[modelInfo.value.pkField]);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** 搜索按钮操作 */
function handleQuery(params) {
  pageInfo.value.pageNum = 1;
  queryParams.value = params;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  queryParams.value = {};
  pageInfo.value.pageNum = 1;
  getList();
}

/** 新增按钮操作 */
function handleAdd() {
  formData.value.formAction = 'add';
  formData.value.formTitle = '新增'+modelInfo.value.name;
}

/** 修改按钮操作 */
function handleUpdate(row) {  
  formData.value.formId = row.id;
  formData.value.formAction = 'edit';
  formData.value.formTitle = '修改'+modelInfo.value.name;
}
/** 关闭表单操作 */
function handleCloseForm() {
  formData.value.formAction = '';
}
/** 表单提交成功操作 */
function handleSubmit() {
  formData.value.formAction = '';
  getList();
}
/** 删除按钮操作 */
function handleDelete(row) {
  const _ids = row.id || ids.value;
  proxy.$modal.confirm('是否确认删除选中的"' + modelInfo.value.name + '"的数据？').then(function () {
    return delModelData(modelInfo.value.code, _ids);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
}

/** 导出按钮操作 */
function handleExport() {
  let modelCode = modelInfo.value.code;
  proxy.download("dev/data/export/"+modelCode, {
    ...queryParams.value,
  },`${modelCode}_${new Date().getTime()}.xlsx`);
}

/** 导入按钮操作 */
function handleImport() {
  formData.value.formAction = 'import';
  formData.value.formTitle = '导入'+modelInfo.value.name;
}

</script>
